Skip to content

feat: fall back to a bundled preview image for theme listings - #21

Merged
ClausValcaTD merged 1 commit into
mainfrom
feat/theme-preview-fallback
Nov 6, 2026
Merged

ClausValcaTD merged 1 commit into
mainfrom
feat/theme-preview-fallback

Conversation

@ClausValcaTD

@ClausValcaTD ClausValcaTD commented Nov 6, 2026 •

Copy link
Copy Markdown
Member

What changed

A theme with an empty screenshots_json previously fell straight through to the CSS mock box, so a shipped theme could look unfinished even when a real preview existed. This adds a middle step: when a row has no screenshots, use a preview bundled with the site at public/images/previews/<id>.png if one exists — and only then show the mock box.

Preference order is now: row screenshots → bundled preview → mock box.

flowchart TD
    A[Theme listing] --> B{screenshots_json<br/>non-empty?}
    B -->|yes| C[Gallery: DB screenshots]
    B -->|no| D{bundled preview<br/>public/images/previews/&lt;id&gt;.png?}
    D -->|yes| E[Gallery: bundled preview]
    D -->|no| F[CSS mock box]
Loading

Why the glob

Existence cannot be probed at request time: a Cloudflare Worker has no filesystem. The page therefore resolves which ids ship a preview at build time with an eager import.meta.glob('../../../public/images/previews/*.png', { query: '?url' }), which bakes the id list into the worker. The selection itself is pure logic, so it lives in src/lib/theme.ts as themeGallery() and is unit-tested.

Note: the glob path is relative to the .astro file's directory, so src/pages/plugin/ needs three ../.

Files

File Change
src/lib/theme.ts new themeGallery(id, screenshots, hasBundledPreview) helper
src/pages/plugin/[id].astro build-time glob + showGallery / showMockup wiring
tests/theme.test.ts 4 new unit tests for themeGallery
public/images/previews/anime-tsundere.png first bundled preview, extracted from the anime-tsundere .orskin

Verification

  • npm test → 95/95 pass (was 91; +4 new)
  • npm run build → clean; npx tsc --noEmit → zero errors in src/ (only the pre-existing astro.config.mjs vite-duplication error)
  • Runtime, via wrangler pages dev dist + local D1 rows — all three branches confirmed on real rendered HTML:
Plugin screenshots_json Bundled preview? Result
cyberpunk-neon ["/images/romeo-banner.png"] — gallery, DB screenshot (priority preserved)
anime-tsundere [] yes gallery, /images/previews/anime-tsundere.png
temp mockonly-test [] no mock box

The served preview image was byte-identical (SHA-256 8501d08f…eff85d). Temporary test rows and scratch pages were removed.

This pull request was created by an AI agent (OpenHands) on behalf of the repository maintainer.

Summary by CodeRabbit

  • New Features
    • Theme pages now display available listing screenshots, or a bundled preview when screenshots aren’t available.
    • When neither image source is available, the existing CSS mockup is shown instead.

A theme with an empty `screenshots_json` previously fell straight through to
the CSS mock box, so a shipped theme could look unfinished even when a real
preview existed. Add a middle step: when the row has no screenshots, use a
preview bundled with the site at `public/images/previews/<id>.png` if one
exists, and only then show the mock box.

Preference order is now: row screenshots -> bundled preview -> mock box.

Existence cannot be probed at request time because a Cloudflare Worker has no
filesystem, so the page resolves which ids ship a preview at build time with an
eager `import.meta.glob(..., { query: '?url' })`. The selection itself is pure
logic and lives in `src/lib/theme.ts` as `themeGallery()` with unit tests.

Also adds the first bundled preview, extracted from the anime-tsundere
`.orskin` bundle.

Co-authored-by: openhands <openhands@all-hands.dev>
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying openrom-store with  Cloudflare Pages  Cloudflare Pages

Latest commit: 89f8011
Status: ✅  Deploy successful!
Preview URL: https://fec2111f.openrom-store.pages.dev
Branch Preview URL: https://feat-theme-preview-fallback.openrom-store.pages.dev

View logs

@coderabbitai

coderabbitai Bot commented Nov 6, 2026 •

Copy link
Copy Markdown

Explain Change →

Caution

Review failed

The pull request is closed.

Walkthrough

The theme detail page now uses listing screenshots or a bundled preview in its image gallery. When neither is available, it displays the existing mockup.

Changes: Theme preview selection and display

Layer / File(s) Summary
Gallery image selection
src/lib/theme.ts, tests/theme.test.ts
themeGallery prefers valid listing screenshots, uses a bundled preview when available, and otherwise returns an empty array. Tests cover these selection rules.
Theme detail page preview
src/pages/plugin/[id].astro
The page discovers bundled preview IDs and uses themeGallery to select images. It renders gallery images when available and shows the mockup otherwise.

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant BuildTimeGlob
  participant ThemeDetailPage
  participant themeGallery
  BuildTimeGlob->>ThemeDetailPage: bundled preview IDs
  ThemeDetailPage->>themeGallery: screenshots and preview availability
  themeGallery-->>ThemeDetailPage: selected gallery images
  ThemeDetailPage->>ThemeDetailPage: render gallery or mockup
Loading

Possibly related PRs

  • M5Devs/OpenROM-Store#18: Adds the theme detail page and color-based mockup that this change conditionally displays.
Merge Risk: Low · up to 89f80

A broken screenshot can leave a theme without a usable preview. This is a bounded display issue.

- [ ] Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

@ClausValcaTD
ClausValcaTD merged commit acf12a4 into main Nov 6, 2026
2 of 3 checks passed
@ClausValcaTD
ClausValcaTD deleted the feat/theme-preview-fallback branch November 6, 2026 17:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants